import { Button, Col, Divider, Flex } from 'antd';

import {
    confirmOffer,
    rejectOffer,
} from '../../../../../../api/walletsAPI.ts';
import { RegularText } from '../../../../../../components/typography/RegularText.tsx';
import { SPACE_SYMBOL } from '../../../../../../utils';
import { useOffersCardStyles } from '../styles.tsx';

import { CardItemDescription } from './CardItemDescription.tsx';
import { CardItemsIcon } from './CardItemIcon.tsx';

import type { MetadataList } from '../../../../../../types.ts';
import type { FC } from 'react';

interface IBarterOffersCardProps {
    listOfSuggestedNFTs: MetadataList;
    listOfDesiredNFTs: MetadataList;
    offerId: bigint;
    isOutgoing?: boolean;
    openModal: () => void;
}

export const BarterOffersCard: FC<IBarterOffersCardProps> = ({
    listOfSuggestedNFTs,
    listOfDesiredNFTs,
    offerId,
    openModal,
    isOutgoing = false,
}) => {

    const { styles } = useOffersCardStyles();

    const textForDescription = isOutgoing
        ? `Вы предлагаете обменять${SPACE_SYMBOL}`
        : `Вам предлагают обменять${SPACE_SYMBOL}`;

    const yourNFTs = isOutgoing ? listOfSuggestedNFTs : listOfDesiredNFTs;
    const otherNFTs = isOutgoing ? listOfDesiredNFTs : listOfSuggestedNFTs;

    return (
        <Col className={styles.wrap}>
            <div className={styles.inventory}>
                <Flex align="start" justify="center" vertical>
                    <div className={styles.offerDescription}>
                        <RegularText>
                            {textForDescription}
                        </RegularText>
                        {yourNFTs.length
                            ? yourNFTs.map((NFT, index) => {
                                return (
                                    <CardItemDescription key={index} NFT={NFT} isLast={index !== yourNFTs.length - 1}/>
                                );
                            })
                            : 'ничего'

                        }
                        <RegularText>
                            {SPACE_SYMBOL}{'на'}{SPACE_SYMBOL}
                        </RegularText>
                        {otherNFTs.length
                            ? otherNFTs.map((NFT, index) => {
                                return (
                                    <CardItemDescription key={index} NFT={NFT} isLast={index !== otherNFTs.length - 1}/>
                                );
                            })
                            : 'ничего'
                        }
                    </div>
                    {
                        otherNFTs.length ? (
                            <>
                                <RegularText>
                                    Вы получите:
                                </RegularText>

                                <CardItemsIcon listOfNFTs={otherNFTs}/>
                            </>
                        ) : null
                    }
                    { (yourNFTs.length && yourNFTs.length ) ? <Divider className={styles.cardDivider}/> : null }
                    {
                        yourNFTs.length
                            ? (
                                <>
                                    <RegularText>
                                        Вы отдадите:
                                    </RegularText>

                                    <CardItemsIcon listOfNFTs={yourNFTs}/>
                                </>
                            ) : null
                    }
                </Flex>
                <Flex gap={8} justify="end" className={styles.cardsWrapper}>
                    <Button type="primary" onClick={openModal}>p2p</Button>
                    {
                        isOutgoing
                            ? <Button onClick={() => rejectOffer(offerId)}>Отозвать</Button>
                            : (
                                <>
                                    <Button type="primary" onClick={() => confirmOffer({
                                        NFTs: listOfDesiredNFTs.map(el => ({ nftAddr: el.contract, tokenID: el.tokenId })),

                                        offerId,
                                    })}>Принять</Button>
                                    <Button onClick={() => rejectOffer(offerId)}>Отклонить</Button>
                                </>
                            )
                    }
                </Flex>
            </div>
        </Col>
    );
};